const stats = new Stats()
stats.showPanel(0)
document.body.appendChild(stats.dom)

const setting = {
    dMax: 14,//圆的最大直径
    dMin: 10,
    gap: 5,
    hue: 40,
}

function Ball(x, y) {
    this.size = setting.dMax
    this.hue = setting.hue
    this.x = x
    this.y = y

    this.draw = () => {
        fill(this.hue, 100, 100)
        circle(this.x, this.y, this.size)
    }

    this.update = () => {
        const distance = sqrt(pow((this.x - mouseX), 2) + pow((this.y - mouseY), 2))
        let size = floor(200 / distance)
        if (size <= setting.dMin) {
            size = setting.dMin
        } else if (size > setting.dMax) {
            size = setting.dMax
        }
        this.size = size
        this.draw()
    }

}

let balls = []

function initBalls() {
    balls = []
    for (let x = setting.dMax / 2; x < width; x += setting.dMin + setting.gap) {
        for (let y = setting.dMax / 2; y < height; y += setting.dMin + setting.gap) {
            const ball = new Ball(x, y)
            balls.push(ball)
        }
    }
    console.log(balls);
}

function updateBalls() {
    balls.forEach(ball => {
        ball.update()
    })
}

function setup() {
    createCanvas(innerWidth, innerHeight)
    noStroke()
    frameRate(60)
    colorMode(HSB, 100)
    background(0)
    initBalls()
}

function draw() {
    stats.begin()
    clear()
    background(0)
    // background(0, 0.9)
    updateBalls()
    stats.end()
}
